import React, { useEffect, useState } from 'react';
import {WaterMark} from "@ant-design/pro-layout";
import {useModel} from "umi";
import {useParams} from "react-router";

type SearchResultItem = {
  watermark: string;
  pdf_url: string;
  file_url: string;
  file_name: string;
  versionId: number;
  title: string;
  labels: {
    name: string;
    color: string;
  }[];
  description: string;
};

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<SearchResultItem>;


const PDFViewForm: React.FC = () => {
  // 用户初始化信息
  const { initialState } = useModel('@@initialState');
  // const fetchUserInfo = async () => {
  //   const userInfo = await initialState?.fetchUserInfo?.();
  //
  //   // 有用户信息 设置初始参数
  //   if (userInfo) {
  //     const menus = await initialState?.fetchUserMenus?.();
  //     await setInitialState({
  //       ...initialState,
  //       currentUser: userInfo,
  //       menuData: menus,
  //     });
  //   }
  // };

  // 获取传入的ID
  const params = useParams();
  const fileId = params["id"]
  const planId = params["planId"]

  // fileUrl
  const [fileUrl, setFileUrl] = useState<string>( "")

  // TOKEN
  const token = localStorage.getItem('token');

  // 根据文件ID，获取文件信息
  useEffect(() => {
    fetch('/api/user/file/detail?id=' + fileId, {
      method: 'GET',
      headers:{
        'Authorization': `Bearer ${token}`
      }
    }).then(res=>res.json()).then(res => {
      if (res){
        // 拼接后台url
        setFileUrl(res.data?.path)
        console.log(res.data)
      }
    })
  }, []);

  // 根据文件ID和计划ID，更新文件查看记录
  useEffect(() => {
    fetch('/api/px/readLog?fileId=' + fileId  + "&planId=" + planId, {
      method: 'GET',
      headers:{
        'Authorization': `Bearer ${token}`
      }
    }).then(res=>res.json()).then(res => {
      if (res){
        console.log(res)
      }
    })
  }, []);

  return (
    <div
      style={{
        maxWidth: "100vw",
        top: 0,
        paddingBottom: 0,
        height: "100vh",
        overflowY: "hidden",
      }}
    >
      <WaterMark
        rotate={-25}    // 旋转
        // content={getStatusStr(props.values.file_name)}
        // 图片水印 image={}
        content={[ '粤能 ' + initialState?.currentUser?.name, "保密资料，请勿传播"]}
        // image={getStatusImages(props.values.status)}
        // fontColor={'#ffccc7'}
        // fontSize={36}
        // offsetLeft={290} // 左间距
        // offsetTop={230}  // 上间距
        width={150}         // 水印宽度
        height={90}         // 水印高度
        gapX={30}           // 左右水印的间距
        gapY={90}           // 上下水印的间距
        zIndex={9999}       // 水印层级
      >
        <iframe
          width="99%"
          height={window.screen.availHeight}
          src={"/pdf/web/viewer.html?file=" + fileUrl}
        />
      </WaterMark>
    </div>
  );
};

export default PDFViewForm;
